<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container" style="position:absolute;z-index:100;left:10px"  v-if="query.title">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
           {{ query.title }}
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle2 :isCenter="true" title="产量统计" class="float margin" style="width: 99%">
          <div class="cntj_box flex_between" slot="content">
            <div class="cntj_item backgroung">
              <nav class="flex_center" :class="'text_' + color[0]">
                当日累计产量
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item" :class="['border_' + color[0]] ">
                  <div class="number" :class="'text_shadow_' + color[0]">
                    {{ dayBotleCountXiang||0 }}
                  </div>
                  <div class="unit">箱</div>
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item" :class="['border_' + color[0]] ">
                  <div class="number" :class="'text_shadow_' + color[0]">
                    {{ dayBotleCount||0 }}
                  </div>
                  <div class="unit">瓶</div>
                </div>

              </div>
            </div>
            <div class="cntj_item backgroung" v-for="(item, index) in top1" :key="index" v-show="item.name!='当日累计产量'">
              <nav class="flex_center" :class="'text_' + color[index]">
                {{ item.name }}
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction" :class="['border_' + color[index],item.name!='当日累计产量' ? 'cntj_item_content_item': 'cntj_item_content_item-100'] ">
                  <div class="number" :class="'text_shadow_' + color[index]">
                    {{ item.value1 }}
                  </div>
                  <!-- <div class="unit" >瓶</div> -->
                  <div class="unit">标准箱</div>
                </div>
                <div class="cntj_item_content_item flex_center_direction" :class="'border_' + color[index]" v-show="item.value2!=null">
                  <div class="number" :class="'text_shadow_' + color[index]">
                    {{ item.value2 }}
                  </div>
                  <div class="unit">吨</div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_center">
       

        <StrokeTitle2 :isCenter="true" title="环比产量分析" class="float margin" style="width: 32.4%">
          <!-- <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange($event, 4)" />
            <div class="all_box" style="margin-left:0px" @click="productRecordDetailCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg :data="center3" legendLeft="46%" length="5" itemWidth="0.7" cirLeft="0.6" :img="require('@/assets/images/echarts/dzbccp3.png')" />
          </div> -->
          <div class="flex_center Echarts" style="height: 100%" slot="content">
            <div class="calculagraph_left">
              <Ring style="width: 128px; height: 128px" :data="{ allRate: center2.thisMonth }" subtext=""
                titleTop="43%" />
              <div class="label"  style="margin-top: -22px; background: rgba(0, 0, 0, 0)">实际值/标准箱</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="60%" leftWidth="40%" title="上期" :number="center2.thatMonth" />
              <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="环比变化" :number="center2.rate"
                unit="%" />
            </div>
          </div>
        </StrokeTitle2>
        <StrokeTitle2 :isCenter="true" title="同比产量分析" class="float margin" style="width: 32.3%">
          <!-- <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange($event, 3)" />
            <div class="all_box" style="margin-left:0px" @click="productRecordDetailCount3All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg :data="center2" legendLeft="20%" length="5" itemWidth="0.7" cirLeft="-0.05" :img="require('@/assets/images/echarts/dzbccp2.png')" />
          </div>
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" :options="[
                {
                  value: 'month',
                  label: '当月',
                },
                { value: 'quarter', label: '当季' },
              ]" @change="radioChange($event)" />
          </div> -->
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" :options="[
                {
                  value: 'month',
                  label: '当月',
                },
                { value: 'quarter', label: '当季' },
              ]" @change="radioChange($event)" />
          </div>
          <div class="flex_center Echarts" style="height: 100%" slot="content">
            <div class="calculagraph_left">
              <Ring style="width: 128px; height: 128px" :data="{ allRate: center3.thisMonth }" subtext=""
                titleTop="43%" />
              <div class="label"  style="margin-top: -22px; background: rgba(0, 0, 0, 0)">实际值/标准箱</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="60%" leftWidth="40%" title="上期" :number="center3.thatMonth" />
              <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="同比变化" :number="center3.rate"
                unit="%" />
            </div>
          </div>
        </StrokeTitle2>
        <StrokeTitle2 :isCenter="true" title="实际产量分析" class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange($event, 2)" />
            <div class="all_box" style="margin-left:0px" @click="productRecordDetailCount2All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg :data="center1" legendLeft="20%" length="5" itemWidth="0.7" cirLeft="-0.05" :img="require('@/assets/images/echarts/dzbccp1.png')" />
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_bottom">
        <StrokeTitle2 :isCenter="true" title="当月产量统计" class="float margin" style="width: 99%">
          <div class="flex_center" slot="select">
            <div class="all_box" style="margin-left:0px" @click="radioChange5">
              当月
            </div>
            <el-date-picker :clearable="false" :editable="false" value-format="yyyy-MM-dd" size="mini" v-model="bottomForm.monthDate" @change="productRecordDetailCount5" type="month" placeholder="选择月">
            </el-date-picker>
          </div>
          <MoreDirection :data="bottom" :legendData="['产量']" :isMoretooltip="true" :isCategory="false" barWidth="11" :yAxisLineShow="true" :xAxisLineShow="true" yUnit="标准箱" slot="content" />
        </StrokeTitle2>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import {
  ProductRecordDetailCount1,
  ProductRecordDetailCount2,
  // ProductRecordDetailCount3,
  // ProductRecordDetailCount4,
  ProductRecordDetailCount6,
  ProductRecordDetailCount5,
} from "@/api/echarts/capacityDesign/index";
import { GetBottleDay, GetBoxDay } from "@/api/echarts/index";
import TwoRow from "../../components/echarts/bar/twoRow.vue";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import StrokeItem6 from "@/components/myComponents/stroke/item6.vue";
export default {
  components: {
    TwoRow,
    StrokeTitle2,
    StrokeItem6
  },
  name: "CapacityDesign",
  data() {
    return {
      model: "month",
      color: ["blue", "orange", "green", "pink"],
      //产量统计,
      top1: [
        { name: "当月累计产量", value1: 0, value2: 0 },
        { name: "当月累计产量", value1: 0, value2: 0 },
        { name: "当月累计产量", value1: 0, value2: 0 },
      ],
      //产量分布
      center1: [],
      center1Form: {
        pDateEnd: this.$getMonth("e", 0),
        pDateStart: this.$getMonth("s", 0),
      },
      //追加分布
      center2: {
          rate: '0',
          thatMonth: '0',
          thisMonth: '0',
        },
        center2Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
          countType: ""
        },
        center3Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
          countType: "1"
        },
        //同比变化
        center3: {
          rate: '0',
          thatMonth: '0',
          thisMonth: '0',
        },
      bottomForm: { monthDate: this.parseTime(new Date(), "{y}-{m}-{d}") },
      //当月产量统计
      bottom: [],
      //产量统计分析
      dayBotleCount: 0,
      //产量统计分析-箱子
      dayBotleCountXiang: 0,
       //路由信息
      query: { length: 52, title: "" },
    };
  },
  activated() {
    this.onload();
    this.getBottleDay();
    this.getBoxDay();
     if (this.$route.query.length) {
      this.query = this.$route.query;
    } else {
      this.query = { length: 40, title: "" };
    }
  },
  methods: {
    onload() {
      //产量统计
      this.productRecordDetailCount1();
      //产量分布
      this.productRecordDetailCount2();
      // //追加分布
      // this.productRecordDetailCount3();
      // //日产量分布
      // this.productRecordDetailCount4();
      //当月产量统计
      this.productRecordDetailCount5();
          //环比产量分析
          this.productRecordDetailCount6();
        //同比产量分析
        this.productRecordDetailCount7()
    },
    //选择时间
    radioChange(event, num) {
      // console.log(event[0], "----", num);
      // console.log(event[1], "----", num);
      // console.log(this.center1Form.pDateStart);
      // console.log(this.center1Form.pDateEnd);
      // this.center2Form.pDateEnd=event[0];
      if (num) {
          this["center" + (num - 1) + "Form"].pDateStart = event[0];
          this["center" + (num - 1) + "Form"].pDateEnd = event[1];
          this["productRecordDetailCount" + num]();
        } else {
          this["center3" + "Form"].pDateStart = event[0];
          this["center3" + "Form"].pDateEnd = event[1];
          this["productRecordDetailCount" + 7]();
        }

      // console.log(this.center1Form.pDateStart, "过滤后的");
      // console.log(this.center1Form.pDateEnd, "过滤后的");
    },
    //产量统计
    productRecordDetailCount1() {
      ProductRecordDetailCount1().then((res) => {
        if (res.code == 200) {
          this.top1 = res.data;
        }
      });
    },
    //产量分布
    productRecordDetailCount2() {
      ProductRecordDetailCount2(this.center1Form).then((res) => {
        if (res.code == 200) {
          this.center1 = res.data;
        }
      });
    },
    //产量分布-全部
    productRecordDetailCount2All() {
      let obj = JSON.parse(JSON.stringify(this.center1Form));
      obj.all = "111";
      ProductRecordDetailCount2(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.tableData.column[0].label = "名称";
          this.$refs.AllDialog.right.unit = "%";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    //环比产量分析
    productRecordDetailCount6() {
        ProductRecordDetailCount6(this.center2Form).then((res) => {
          if (res.code == 200) {
            this.center2 = res.data;
          }
        });
      },
      //同比产量分析
      productRecordDetailCount7() {
        ProductRecordDetailCount6(this.center3Form).then((res) => {
          if (res.code == 200) {
            this.center3 = res.data;
          }
        });
      },
    // //追加分布
    // productRecordDetailCount3() {
    //   ProductRecordDetailCount3(this.center2Form).then((res) => {
    //     if (res.code == 200) {
    //       // console.log(11111, res);
    //       this.center2 = res.data;
    //     }
    //   });
    // },
    // //追加分布-全部
    // productRecordDetailCount3All() {
    //   let obj = JSON.parse(JSON.stringify(this.center2Form));
    //   obj.all = "111";
    //   ProductRecordDetailCount3(obj).then((res) => {
    //     if (res.code == 200) {
    //       this.$refs.AllDialog.dialogTableVisible = true;
    //       this.$refs.AllDialog.tableData.column[0].label = "名称";
    //       this.$refs.AllDialog.right.unit = "%";
    //       this.$refs.AllDialog.tableData.data = res.data;
    //     }
    //   });
    // },
    // //日产量分布
    // productRecordDetailCount4() {
    //   ProductRecordDetailCount4(this.center3Form).then((res) => {
    //     if (res.code == 200) {
    //       this.center3 = res.data;
    //     }
    //   });
    // },
    // //日产量分布-全部
    // productRecordDetailCount4All() {
    //   let obj = JSON.parse(JSON.stringify(this.center3Form));
    //   obj.all = "111";
    //   ProductRecordDetailCount4(obj).then((res) => {
    //     if (res.code == 200) {
    //       this.$refs.AllDialog.dialogTableVisible = true;
    //       this.$refs.AllDialog.tableData.column[0].label = "日期";
    //       this.$refs.AllDialog.right.unit = "%";
    //       this.$refs.AllDialog.tableData.data = res.data;
    //     }
    //   });
    // },
    //当月产量统计获取当月
    radioChange5() {
      this.bottomForm.monthDate = this.parseTime(new Date(), "{y}-{m}-{d}");
      this.productRecordDetailCount5();
    },
    //当月产量统计
    productRecordDetailCount5() {
      ProductRecordDetailCount5(this.bottomForm).then((res) => {
        if (res.code == 200) {
          this.bottom = [];
          for (var i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.name = res.data[i].name;
            obj.value1 = res.data[i].value;
            obj.valueArr = res.data[i].valueArr;
            this.bottom.push(obj);
          }
        }
      });
    },
    //首页-产量统计-当日产量
    getBottleDay() {
      GetBottleDay().then((res) => {
        if (res.code == 200) {
          this.dayBotleCount = res.data.bottle;
          // this.dayBotleCountXiang = parseInt(res.data.bottle / 24);
        }
      });
    },
    //首页-产量统计-当日产量箱
    getBoxDay() {
      GetBoxDay().then((res) => {
        if (res.code == 200) {
          this.dayBotleCountXiang = res.data.bottle;
          // console.log(res)
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  overflow-x: hidden;
  .content {
    margin-top: 26px;
    width: 100%;
    overflow-x: hidden;
    .content_top,
    .content_bottom,
    .content_center {
      //   background: red;
      width: 100%;
      height: 31.2%;
    }
    .calculagraph_right,
    .calculagraph_left {
      width: 45%;
      background: red($color: #000000);
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;
      float: left;
      margin-left: -8%;
    }
    .calculagraph_right {
      width: 50%;
      align-items: flex-start;
      justify-content: center;
      height: 95%;
      margin-left: 0%;
    }
    .content_top {
      height: 28.7%;
    }
    .content_bottom {
      height: 32.7%;
    }
    .cntj_box {
      width: 100%;
      height: 100%;
      padding: 15px;
      .cntj_item {
        width: 24.5%;
        background: linear-gradient(
          180deg,
          rgba(44, 119, 187, 0.5) 0%,
          rgba(18, 81, 141, 0.5) 100%
        );
        border: 1px solid #2489ee71;
        height: 100%;
        padding: 15px;
        nav {
          font-size: 20px;
          background: rgba(35, 107, 173, 0.7);
          height: 32%;
          width: 100%;
          text-align: center;
        }
        .cntj_item_content {
          width: 100%;
          height: 66%;

          margin-top: 2%;
          .cntj_item_content_item {
            width: 49%;
            background-image: url("~@/assets/images/echarts/zhuangshi.png");
            background-size: 100% 100%;
            height: 100%;
            background-color: rgba(35, 107, 173, 0.7);
            .number {
              font-size: 37px;
            }
            .unit {
              font-size: 17px;
              margin-top: 3%;
              color: #ffffff;
            }
            @media screen and (max-width: 1000px) {
              .number {
                font-size: 28px;
              }
              .unit {
                margin-top: 1%;
                font-size: 14px;
              }
            }
          }
          .cntj_item_content_item-100 {
            width: 100%;
          }
        }
      }
      .border_blue {
        border-bottom: 3px solid rgba(0, 156, 255, 0.9);
      }
      .border_orange {
        border-bottom: 3px solid rgba(255, 153, 0, 0.9);
      }
      .border_green {
        border-bottom: 3px solid rgba(59, 255, 230, 0.9);
      }
      .border_pink {
        border-bottom: 3px solid rgba(254, 58, 234, 0.9);
      }
      .text_blue {
        color: rgba(0, 156, 255, 0.9);
      }
      .text_orange {
        color: rgba(255, 153, 0, 0.9);
      }
      .text_green {
        color: rgba(59, 255, 230, 0.9);
      }
      .text_pink {
        color: rgba(254, 58, 234, 0.9);
      }
      .text_shadow_blue {
        color: rgba(0, 156, 255, 0.9);
        text-shadow: 1px 0px 3px rgba(0, 156, 255, 1);
      }
      .text_shadow_orange {
        color: rgba(255, 153, 0, 0.9);
        text-shadow: 1px 0px 3px rgba(255, 153, 0, 1);
      }
      .text_shadow_green {
        color: rgba(59, 255, 230, 0.9);
        text-shadow: 1px 0px 3px rgba(59, 255, 230, 1);
      }
      .text_shadow_pink {
        color: rgba(254, 58, 234, 0.9);
        text-shadow: 1px 0px 3px rgba(254, 58, 234, 1);
      }
    }
    .Echarts {
      height: 100%;
    }
  }
}
</style>